<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
          width: 500px;
          height: 500px;
          background-color: #ccc;
          color: #fff;
          text-align: center;
          font-size: 100px;
        }
      </style>
</head>
<body>
    <div class="box"></div>
    <script src="./lodash.min.js"></script>
    <script>
      const box = document.querySelector('.box')
      let i = 1  // 让这个变量++
      // 鼠标移动函数
      function mouseMove() {
        box.innerHTML = ++i
        // 如果里面存在大量操作 dom 的情况，可能会卡顿
      }
  
      // box.addEventListener('mousemove', mouseMove)
      // lodash 节流写法
      // box.addEventListener('mousemove', _.throttle(mouseMove, 500))
      // lodash 防抖的写法
    //   box.addEventListener('mousemove', _.debounce(mouseMove, 500))
  
      //手写防抖函数
      //核心是利用setTimeout 定时器来实现
      // 1. 声明定时器变量
      // 2. 每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清楚以前的定时器
      // 3. 若没有定时器，则开启定时器，存入到定时器变量里
      // 4. 定时器里面写函数调用
      function debounce(fn, t){
        let timer
        // return 返回一个匿名函数
        return function(){
            if(timer) clearTimeout(timer)
            timer = setTimeout(function(){
                fn()
            },t)
        }
      }
      box.addEventListener('mousemove',debounce(mouseMove,500))
    </script>
</body>
</html>